<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM架构</title>
    <!-- 引入VUE -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        MVVM模型
            1. M: 模型(model) :data中的数据
            2. v: 视图(view)  : 模板代码
            3. vm: 视图模型(viewModel): vue实例
        观察发现
            1.data中所有的属性, 最后都出现在了vm身上
            2.vm身上的所有的属性 及 vue原型上所有属性,在vue模板中都可以直接使用
     -->
   <div id="root">
        <h1>学校名称: {{name}}</h1>
        <h1>学校地址: {{address}}</h1>
        <h1>学校规模:{{students}}</h1>
        <!-- <h1>测试: {{1+1}}</h1>
        <h1>测试: {{$slots}}</h1>
        <h1>测试: {{$emit}}</h1>
        <h1>测试: {{_c}}</h1> -->
   </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el:"#root",
        data:{
            name:'硕磊',
            address:'软件园123321',
            students:'好几百人'
        }
    })
    console.log(vm);
</script>
</html>